<template>
    <div>
        <s-header :back="false" :background="conf.header.background" backText="" title="#{title}" color="#000" />
        <swiper
            :style="{ height: conf.swiper.height }"
            circular
            :indicator-dots="false"
            :autoplay="true"
            :interval="2000"
            :duration="500"
        >
            <swiper-item>
                <view
                    class="flex flex-center"
                    :style="{ height: conf.swiper.height }"
                    style="background-color: #007aff"
                >
                    首页图片
                </view>
            </swiper-item>
            <swiper-item>
                <view
                    class="flex flex-center"
                    :style="{ height: conf.swiper.height }"
                    style="background-color: #09bb07"
                >
                    特色图片
                </view>
            </swiper-item>
        </swiper>
        <div class="row flex-center" style="margin-top: 30rpx">
            <div
                class="column flex-center"
                style="width: 160rpx"
                v-for="(item, index) in conf.list_page.list"
                :key="index"
            >
                <image src="/static/icon.png" style="width: 80rpx; height: 80rpx; border-radius: 50%" />
                <div style="font-size: 24rpx; margin-top: 10rpx">{{ item.label }}</div>
            </div>
        </div>
        <div class="flex flex-center" style="margin: 30rpx 0rpx">
            <div style="width: 94%; background-color: #fafafa; height: 20rpx"></div>
        </div>
        <div class="row items-center" style="padding-left: 30rpx; font-weight: bold">
            <div style="font-size: 34rpx">#{title}</div>
            <div style="margin-left: 20rpx; color: #c00000; font-size: 32rpx">COMMODITY AREA</div>
        </div>
        <div class="row" style="padding: 15rpx">
            <div
                class="column"
                style="width: 330rpx; margin: 15rpx"
                v-for="(item, index) in conf.list"
                :key="index"
                @click="toDetail(item)"
            >
                <div
                    class="relative flex flex-center"
                    style="width: 330rpx; height: 330rpx; border-radius: 24rpx; overflow: hidden"
                >
                    <image src="/static/icon.png" style="width: 330rpx; height: 330rpx" />
                </div>
                <div style="font-size: 30rpx">{{ item.label }}</div>
                <div class="row justify-between" style="font-size: 20rpx; color: #909399">
                    <div class="row">
                        <div>￥</div>
                        <div style="text-decoration: line-through">{{ item.primeCost }}</div>
                    </div>
                    <div>已售{{ item.sellNum }}件</div>
                </div>
                <div class="row" style="color: #ff4550; font-weight: bold; align-items: flex-end">
                    <div style="font-size: 30rpx">￥</div>
                    <div style="font-size: 34rpx">{{ item.sell }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onUnmounted, reactive } from 'vue'
import CLogin from '~/store/CLogin'
import CSystem from '~/store/CSystem'
import CEvent from '~/utils/CEvent'
import System from '~/utils/System'
const conf = reactive({
    header: {
        background: '#ffffff00'
    },
    swiper: {
        background: ['color1', 'color2', 'color3'],
        height: CSystem.customBarHeightRpx + 250 + 'rpx'
    },
    list_page: {
        list: [
            {
                label: '会员专区'
            },
            {
                label: '优惠促销'
            },
            {
                label: '定制服务'
            },
            {
                label: '其他产品'
            }
        ]
    },
    list: [
        {
            label: '1类洗发水',
            primeCost: '299.00',
            sellNum: '156',
            sell: '99.00'
        },
        {
            label: '2类洗发水',
            primeCost: '498.00',
            sellNum: '256',
            sell: '219.00'
        },
        {
            label: '3类洗发水',
            primeCost: '398.00',
            sellNum: '222',
            sell: '199.00'
        },
        {
            label: '4类洗发水',
            primeCost: '388.00',
            sellNum: '333',
            sell: '168.00'
        },
        {
            label: '5类洗发水',
            primeCost: '99.00',
            sellNum: '666',
            sell: '9.9'
        }
    ]
})

CEvent.emit('topStatus', { status: true })

CEvent.on('boxTop', (data: number) => {
    const colorRes = 255 - parseInt(data * 255 + '')
    const hexRes = colorRes.toString(16).padStart(2, '0')
    conf.header.background = '#ffffff' + hexRes
})

onUnmounted(() => {
    CEvent.emit('topStatus', { status: false })
})

const toDetail = (item: any) => {
    CLogin.dialog.content = `登录以后才能购买${item.label}，请登录`
    if (!System.checkLogin(true)) {
        System.sr('购买成功')
    }
}
</script>
<style lang="scss" scoped></style>
